//@ts-nocheck
import React, { useEffect, useRef } from 'react'

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/grid'
import './index.less'

interface IProps {
  data?: any
  title?: string
  subTitle?: string
  size?: 'big' | 'normal' | 'middle'
  textStyle?: object
  subtextStyle?: object
  progressWidth?: number
  labelStyle?: object
}

const BlueRingChart: React.FC<IProps> = ({
  data,
  title,
  subTitle,
  size = 'normal',
  textStyle,
  subtextStyle,
  progressWidth,
  labelStyle
}) => {
  const chartWrapRef = useRef<any>(null)

  useEffect(() => {
    let chart = echarts.init(chartWrapRef.current)

    let total = 0
    let gaugeData = data.map((item, index) => {
      total += item.code
      if (total === 100) {
        total = 99.99
      }
      return {
        ...item,
        code: total
      }
    })

    let options: any = {
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      color: ['#085DFF', '#6B9EFF', '#B4CEFF', '#E6EEFF'],
      series: [
        {
          type: 'pie',
          radius: ['55%', '70%'],
          avoidLabelOverlap: true,
          // stillShowZeroSum :false,//为 0 情况下是否展示
          // showEmptyCircle:true,
          borderCap: 'square',
          itemStyle: {
            borderRadius: 100,
            shadowBlur: 6,
            shadowOffsetX: 0,
            shadowOffsetY: 1,
            shadowColor: 'rgba(0, 95, 255, 0.2)'
            // borderColor: 'black',
          },
          label: {
            show: true,
            color: '#69707F',
            fontSize: 9,
            ...labelStyle
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: '#DCE0E6'
            }
          },
          data: data.map((item, index) => {
            return {
              name: item.label,
              value: item.code,
              itemStyle: {
                color: 'transparent'
              }
            }
          }),
          top: 5,
          left: 5,
          right: 5,
          bottom: 5,
          emphasis: {
            disabled: true,
            scale: false
          },
          tooltip: {
            formatter: function (params, ticket, callback) {
              return params.name + ' ' + params.value + '%'
            }
          }
        },
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          radius: '65%',
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: true,
            roundCap: true,
            width: progressWidth || (size === 'big' ? 16 : 10)
          },
          data: gaugeData.map((item, index) => {
            return {
              value: item.code
            }
          }),
          title: {
            fontSize: 14
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          tooltip: {
            show: false
          },
          detail: {
            width: 40,
            height: 14,
            fontSize: 14,
            color: '#fff'
          }
        }
      ]
    }

    options.title = {
      show: true,
      text: title || '',
      top: '40%',
      left: '50%',
      textAlign: 'middle',
      padding: 0,
      itemGap: 0,
      textStyle: {
        // width: '100%',
        fontSize: size === 'big' ? 28 : 16,
        fontWeight: 'bold',
        color: '#085DFF',
        lineHeight: size === 'big' ? 28 : 16,
        fontFamily: 'DINAlternate-Bold, DINAlternate',
        ...textStyle
      }
    }
    if (subTitle) {
      options.title.subtext = subTitle
      options.title.subtextStyle = {
        // width: '100%',
        fontSize: subTitle?.length > 4 ? (subTitle?.length > 5 ? 7 : 8) : 10,
        fontWeight: 'bold',
        color: '#293A5E',
        lineHeight: 10,
        padding: 0,
        ...subtextStyle
      }
    }

    chart.setOption(options)
  }, [data])
  return <div className="ring-chart" ref={chartWrapRef} />
}
export default (BlueRingChart)
